<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JSON</title>
	<style>
		table {
			width: 700px;
			border-collapse: collapse;
		}
		td {
			height: 40px;
			text-align: center;
			border: 1px solid #CCC;
		}
	</style>
</head>
<body>
	<table>

	</table>
	<div class="btn"><input type="button" value="获取数据"></div>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="js/template-native.js"></script>
	<!-- 引入模板引擎后，就有一个全局方法template(tpl, data) -->

	<!--
	    模板引擎的基本机理就是替换（转换），将指定的标签转换为需要的业务数据.

	    模板引擎是为了使用户界面与业务数据（内容）分离而产生的，
	    它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
		
		模板引擎的缺点：性能很低，速度慢于DOM操作
		
		学习的是ArtTemplate模板引擎，当然还有很多的模板引擎，但是基本操作大致相同
	-->
    <script>
		$(".btn").on("click",function(){
		    $.ajax({
				type:"get",
				data:{},
				url:"stars.json",
				success:function (data) {
					console.log(data);

					/*for(var i = 0; i < data.length ; i++){

					}*/

					//拼凑数据
					var info = {
					    items : data
					};

					//利用模板引擎实现
					var html = template("tpl",info);

					console.log(html);

					$("table").html(html);
                }
			})
		})
	</script>

	<!--type 告诉浏览器该如何处理-->
    <script type="text/template" id="tpl">
		<% for(var i = 0;i < items.length; i++){%>
		   <tr>
			   <td><%=items[i].name%></td>
			   <td><%=items[i].age%></td>
			   <td><%=items[i].sex%></td>
			   <td><%=items[i].ablum%></td>
		   </tr>
		<%}%>
	</script>
</body>
</html>